<template>
    <div class="app-container">
        <template v-if="!userStore.hasLocalEmail">
            <NoEmail />
        </template>
        <template v-else>
            <div class="top-wrapper">
                <div style="flex: 1;">
                    <el-form :model="queryParams" ref="queryForm" :inline="true" @submit.prevent>
                        <el-form-item label="主题" prop="subject">
                            <el-input v-model="queryParams.subject" placeholder="请输入关键字" clearable style="width: 240px;"
                                @keyup.enter="handleQuery" />
                        </el-form-item>
                    </el-form>
                    <el-button-group>
                        <el-button bg text type="primary" @click="handleRefresh" icon="refresh">刷新</el-button>
                        <el-button bg text type="primary" icon="Edit" @click="handleWrite"
                            v-hasFunc="'msg:email:save'">写邮件</el-button>
                        <el-button bg text type="danger" icon="Delete" @click="handleDelete"
                            v-hasFunc="'msg:emailinbox:del'">删除</el-button>
                        <el-button bg text type="danger" icon="Delete" v-hasFunc="'msg:emailinbox:clear'">清空</el-button>
                    </el-button-group>
                </div>
            </div>
            <splitpanes class="email-split">
                <pane min-size="25" size="25" style="padding-right: 20px;" class="email-panel">
                    <div>
                        <el-segmented v-model="queryParams.readStatus" @change="handleStatusChange"
                            :options="options.statusOptions" style="width: 100%;">
                            <template #default="{ item }">
                                <div class="item">
                                    <div>{{ item.label }}</div>
                                </div>
                            </template>
                        </el-segmented>
                    </div>
                    <div style="flex: 1;overflow: auto;">
                        <LeftPane ref="listRef" @mail-change="onMailChange" v-model="dataList" v-loading="loading" />
                    </div>
                    <pagination layout="total,prev, pager, next" v-show="total > 0" :total="total"
                        v-model:page="queryParams.pageIndex" v-model:limit="queryParams.pageSize"
                        @pagination="getList" />
                </pane>
                <pane>
                    <MailPane v-loading="emailLoading" :model="data?.email" />
                </pane>
            </splitpanes>
        </template>
    </div>
</template>

<script setup>
import useUserStore from '@/store/modules/user'
import { listEmailRecives, readEmailRecives, delEmailRecives } from "@/api/msg/emailrecives.js";
import LeftPane from './left'
import MailPane from "./mail.vue";
import NoEmail from "../NoEmail.vue"
const { proxy } = getCurrentInstance()

const userStore = useUserStore();
const listRef = ref();
// 遮罩层
const loading = ref(true);
// 总条数
const total = ref(0);
// 数据集
const dataList = ref([]);
const data = ref();
//切换邮件
const emailLoading = ref(false);
// 查询参数
const queryParams = reactive({
    pageIndex: 1,
    pageSize: 10,
    readStatus: undefined,
    subject: undefined,
});



const state = reactive({
    options: {
        statusOptions: [
            { label: "全部", value: undefined, icon: "message" },
            { label: "未读", value: false, icon: "message" }
        ],
    }
})

const { options } = toRefs(state)



// 获取列表方法
const getList = () => {
    loading.value = true;
    listEmailRecives(queryParams).then((res) => {
        dataList.value = res.result;
        total.value = res.totalNum;
        loading.value = false;
    });
};

const getDetail = (mailId) => {
    emailLoading.value = true;
    return readEmailRecives(mailId).then((res) => {
        data.value = res;
        emailLoading.value = false;
    })
}

// 搜索按钮操作
const handleQuery = () => {
    queryParams.pageIndex = 1;
    getList();
};

//刷新收件箱
const handleRefresh = () => {
    handleQuery();
}

//分段器切换
const handleStatusChange = (value) => {
    queryParams.readStatus = value;
    handleQuery();
}

//写邮件
const handleWrite = () => {
    proxy.$router.push({ path: "/msg/mailsend" });
}

//删除邮件
async function handleDelete() {
    try {
        const selectedRows = await listRef.value.getSelectRows();
        const ids = selectedRows.map(item => item.id);
        if (ids.length === 0) {
            proxy.$modal.msgWarning("请选择需要删除的邮件");
            return;
        }
        await proxy.$modal.confirm('确认删除所选邮件？');
        loading.value = true;
        await delEmailRecives(ids);
        proxy.$modal.msgSuccess("删除成功");
        getList();
    } catch (error) {
        console.error(error);
    } finally {
        loading.value = false;
    }
}



const onMailChange = (mailId) => {
    getDetail(mailId)
}



// 页面加载时调用获取列表方法
onMounted(() => {
    if (userStore.hasLocalEmail) {
        getList();
    }
});
</script>


<style lang="scss">
@import './index.scss';
</style>
